<template>
	<!-- 平台来源 -->
	<div id="PlatformSourceChart" class="echarts"></div>
</template>

<script setup lang="ts">
	import { ECharts, EChartsOption, init } from 'echarts';
	interface ChartProp {
		name: string;
		value: number;
		percentage: string;
	}
	const initChart = (data: any = {}): ECharts => {
		const charEle = document.getElementById(
			'PlatformSourceChart'
		) as HTMLElement;
		const charEch: ECharts = init(charEle);
		const option: EChartsOption = {
			grid: {
				top: '0%',
				left: '2%',
				right: '2%',
				bottom: '0%'
				// containLabel: true
			},
			tooltip: {
				trigger: 'item',
				formatter: '{b} :  {c}'
			},
			legend: {
				show: true,
				top: 'middle',
				left: '20px',
				icon: 'circle',
				orient: 'vertical',
				align: 'auto',
				itemWidth: 10,
				textStyle: {
					color: '#fff'
				},
				itemGap: 20,
				formatter: function (name: string) {
					let text = '';
					data.data.forEach((val: ChartProp) => {
						if (val.name === name) {
							text = name + ' --- ' + val.percentage;
						}
					});
					return text;
				},
				data: data.data.map((val: ChartProp) => val.name)
			},
			series: [
				{
					type: 'pie',
					radius: ['60%', '85%'],
					center: ['68%', '45%'],
					color: [
						'#0E7CE2',
						'#FF8352',
						'#E271DE',
						'#F8456B',
						'#00FFFF',
						'#4AEAB0'
					],
					itemStyle: {
						borderColor: '#031845',
						borderWidth: 10
					},
					data: data.data,
					labelLine: {
						show: false
					},
					label: {
						show: false
					}
				},
				{
					type: 'pie',
					radius: ['20%', '28%'],
					center: ['68%', '45%'],
					color: ['#ffffff', 'red'],
					startAngle: 105,
					data: [
						{
							value: 30,
							name: '',
							itemStyle: {
								color: 'transparent'
							}
						},
						{
							value: 5,
							name: '',
							itemStyle: {
								color: 'transparent'
							}
						},
						{
							value: 65,
							name: 'ddd',
							itemStyle: {
								color: '#ffffff'
							}
						}
					],
					silent: true,
					labelLine: {
						show: false
					},
					label: {
						show: false
					}
				},
				{
					type: 'pie',
					radius: [0, '30%'],
					center: ['68%', '45%'],
					startAngle: 90,
					data: [
						{
							value: 25,
							name: '1',
							itemStyle: {
								color: 'transparent',
								borderWidth: 4,
								borderColor: '#ffffff'
							}
						},

						{
							value: 75,
							name: '2',
							itemStyle: {
								color: 'transparent'
							}
						}
					],
					selectedOffset: 10,
					silent: true,
					labelLine: {
						show: false
					},
					label: {
						show: false
					}
				},
				{
					type: 'pie',
					radius: ['96%', '97%'],
					center: ['68%', '45%'],
					color: [
						'#007afe',
						'transparent',
						'#007afe',
						'transparent',
						'#007afe',
						'transparent'
					],
					data: [
						{
							value: 17,
							name: '11'
						},
						{
							value: 17,
							name: '22'
						},
						{
							value: 17,
							name: '33'
						},
						{
							value: 17,
							name: '44'
						},
						{
							value: 17,
							name: '55'
						},
						{
							value: 17,
							name: '66'
						}
					],
					silent: true,
					labelLine: {
						show: false
					},
					label: {
						show: false
					}
				},
				{
					type: 'pie',
					zlevel: 0,
					silent: true,
					radius: ['45%', '46%'],
					center: ['68%', '45%'],
					z: 10,
					label: {
						show: false
					},
					labelLine: {
						show: false
					},
					data: new Array(150)
						.fill('')
						.map((val: string, index: number) => {
							if (index % 3 === 0) {
								return {
									name: (index + 1).toString(),
									value: 10,
									itemStyle: {
										color: '#fff',
										borderWidth: 0,
										borderColor: 'rgba(0,0,0,0)'
									}
								};
							} else {
								return {
									name: (index + 1).toString(),
									value: 25,
									itemStyle: {
										color: 'rgba(0,0,0,0)',
										borderWidth: 0,
										borderColor: 'rgba(0,0,0,0)'
									}
								};
							}
						})
				},
				{
					type: 'pie',
					zlevel: 0,
					silent: true,
					radius: ['58%', '60%'],
					center: ['68%', '45%'],
					z: 10,
					startAngle: 90,
					label: {
						show: false
					},
					color: ['red', 'blue', 'red', 'blue'],

					labelLine: {
						show: false
					},

					data: [
						{
							name: 'r1',
							value: 25,
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(51,149,191,0.5)' // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(51,149,191,0)' // 100% 处的颜色
										}
									],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: 'r2',
							value: 25,
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(0,0,0,0)' // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(51,149,191,0.5)' // 100% 处的颜色
										}
									],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: 'r3',
							value: 25,
							itemStyle: {
								// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(51,149,191,0)' // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(51,149,191,0.5)' // 100% 处的颜色
										}
									],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: 'r4',
							value: 25,
							itemStyle: {
								// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(51,149,191,0.5)' // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(0,0,0,0)' // 100% 处的颜色
										}
									],
									global: false // 缺省为 false
								}
							}
						}
					]
				}
			]
		};
		charEch.setOption(option, true);
		return charEch;
	};
	defineExpose({
		initChart
	});
</script>
<style lang="scss" scoped>
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>
